<template>
	<view id="form-box" class="form-box">


		<button class="mobile-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</button>

		<!-- <view class="submit" @click="submitMethod">
			<image class="submit-btn" mode="widthFix" :src="btnImg">
			</image>
		</view> -->

		<view class="clauze">
			<checkbox-group @change="agreementChange">
				<checkbox :checked="formData.isAgreement" color="#9C340D" />
			</checkbox-group>
			<view style="text-align: center;">
				<text class="text" @click="agreementChange">
					我已阅读并同意
				</text>
				<text class="tip-color" @click.stop="showAgreementHandler(1)">《隐私保护指引》</text>
				<text class="tip-color" @click.stop="showAgreementHandler(2)">《产品说明》</text>
				<text class="text">
					等协议
				</text>

				<view class="tip-text">
					业务资费：首周免费，续订19.9元/月（随时取消）
				</view>
				<view class="tip-text">
					续订权益：20元停车券+热门影音会员n选1
				</view>
				<view class="tip-text">
					客服热线：400-8825-010
				</view>
			</view>

		</view>
		<!-- 	<view class="tip-text">
			喜马拉雅连续包月联合会员权益（ 首次0.01元）
		</view> -->

		<sxplus-yl-agreement v-if="isShowAgreement" @ok="isShowAgreement=false"
			:agreementType="agreementType"></sxplus-yl-agreement>
		<sxplus-yl-agreement-confirm v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler"
			@cancel="isShowAgreementConfirm = false"
			@showAgreement="agreementConfirmShowAgreementHandler"></sxplus-yl-agreement-confirm>
		<sxplus-yl-right-fix :imagePath="baseImagePath" @showAgreement="showAgreementHandler"></sxplus-yl-right-fix>
		<uni-popup ref="inputUserInfo" border-radius="10px 10px 10px 10px" backgroundColor="#fff">
			<view class="my-input-form-box">
				<view class="my-input-title">
					绑定银行卡
				</view>
				<view class="my-input-box">
					<view class="title">姓名</view>
					<input class="input" v-model="formData.username" placeholder="输入持卡姓名" @input="inputUserName" />
				</view>
				<view class="my-input-box">
					<view class="title">手机</view>
					<input class="input" v-model="formData.mobile" placeholder="输入银行卡绑定手机号" type="number"
						@input="validIsAutoSubmit" />
				</view>
				<view class="my-input-box" v-if="flagx">
					<view class="title">身份证</view>
					<input class="input" v-model="formData.cardId" placeholder="输入银行卡绑定身份证号"
						@input="validIsAutoSubmit" />
				</view>
				<view class="my-input-box" v-if="flagx">
					<view class="title">银行类型</view>
					<view class="input">
						<uni-data-select v-model="formData.bankCode" :localdata="blankDropDownlist"
							placeholder="请选择银行类型" @change="changeBank"></uni-data-select>
					</view>
				</view>
				<image :src="baseImagePath+'receive-btn.png'" mode="widthFix" class="receive-btn"
					@click="submitBlankOrder">
				</image>
			</view>

		</uni-popup>
	</view>

</template>

<script>
	import httpUtil from "@/utils/httpUtil.js";
	import validParamsUtil from "@/utils/validParamsUtil.js";
	import messageUtil from "@/utils/messageUtil.js"
	import userApi from "@/api/userApi.js"
	import phoneApi from "@/api/phoneApi";
	import logApi from "@/api/logApi";

	export default {
		data() {
			return {
				formData: {
					username: '',
					mobile: '',
					cardId: '',
					code: '',
					isAgreement: false,
					isSubmit: false, // 是否已经提交过
					intervalId: '',
					bankCode: '',
					bankName: '',
					bankType: '00',
				},
				flagx: false,
				isNeedSendCode: false,
				isShowAgreement: false,
				agreementType: 3,
				sendCodeDownNumber: 0,
				sendCodeText: '获取验证码',
				isShowOrderSuccess: false,
				isShowInput: true,
				isShowAgreementConfirm: false,
				mobileSwiper: {
					autoplay: true,
					interval: 3000,
					duration: 1000,
					vertical: true,
				},
				mobileList: [{
					mobile: '138****4845',
					tip: '0.01元成功领取联合会员',
					time: '一分钟前'
				}, {
					mobile: '181****6012',
					tip: '0.01元成功领取联合会员',
					time: '三分钟前'
				}, {
					mobile: '138****5023',
					tip: '0.01元成功领取联合会员',
					time: '五分钟前'
				}],
				timeData: {
					lastTime: 0,
					hour: 23,
					minute: 59,
					second: 59,
				},
				shows: false,
				bankTypeDropDownList: [{
						name: '银行卡',
						id: '00',
						disabled: false
					},
					{
						name: '信用卡',
						id: '02',
						disabled: false
					},
				],
				blankDropDownlist: [{
						value: "0103",
						text: "中国农业银行"
					},
					{
						value: "0104",
						text: "中国银行"
					},
					{
						value: "0105",
						text: "中国建设银行"
					},

					{
						value: "0301",
						text: "交通银行"
					},
					{
						value: "0302",
						text: "中信银行"
					},

					{
						value: "0304",
						text: "华夏银行"
					},

					{
						value: "0306",
						text: "广东发展银行"
					},
					{
						value: "0307",
						text: "平安银行"
					},
					{
						value: "0310",
						text: "上海浦东发展银行"
					},
					{
						value: "0403",
						text: "中国邮政储蓄银行"
					}
				],
				BANK_CODE: "", //银行编码
				BANK_NAME: "", //银行名字
			};
		},
		props: ['btnImg', 'param', 'sutingcheMobile', 'mobile', 'baseImagePath'],
		computed: {

		},
		mounted() {
			console.log('onLoad1')
			this.initShowTimeMethod()
			// if (this.mobile) {
			// 	this.formData.mobile = this.mobile
			// 	inputPhone()
			// 	if (props.isNeedSendCode !== false) {
			// 		this.sendCodeHandler()
			// 	}

			// }
		},
		methods: {
			inputUserName() {
				if (this.formData.username.length > 0) {
					this.flagx = true
				} else {
					this.flagx = false
				}
			},
			changeBank(e) {
				console.log('changeBank', e);
				this.validIsAutoSubmit()
			},
			submitBlankOrder() {
				if (this.formData.username == '') {
					messageUtil.showFail('姓名不能为空')
					return;
				}

				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					messageUtil.showFail('手机不能为空')
					return;
				}

				if (!this.formData.cardId.match(
						/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)) {

					messageUtil.showFail('身份证格式不正确')
					return;

				}
				if (this.formData.bankCode == '') {
					messageUtil.showFail('请选择绑定银行')
					return;
				}
				for (let i in this.blankDropDownlist) {
					if (this.blankDropDownlist[i].value == this.formData.bankCode) {
						this.formData.bankName = this.blankDropDownlist[i].text
					}
				}
				messageUtil.showLoading();
				let params = {
					a: httpUtil.getA(),
					ACCOUNT_NAME: this.formData.username,
					ID: this.formData.cardId,
					TEL: this.formData.mobile,
					BACKURL: 'http://d.sxin24.com/hms?id=DND',
					BANK_CODE: this.formData.bankCode,
					BANK_NAME: this.formData.bankName,
					BANK_TYPE: this.formData.bankType,
					param: userApi.getParam()
				}
				logApi.addShengXinPlusYinglianLog('提交前参数:' + JSON.stringify(params))
				httpUtil.post('/api/tongliansign/subOrder', params, res => {
					logApi.addShengXinPlusYinglianLog('提交前参数:' + JSON.stringify(params) + '。返回结果' + JSON.stringify(
						res))
					uni.navigateTo({
						url: '/pages/web/web?url=' + encodeURIComponent(res.data.URL)
					})
				})
			},
			validIsAutoSubmit() {
				if (this.formData.username != '' && this.formData.cardId != '' && this.formData.mobile != '' && this
					.formData.bankCode != '') {
					if (!validParamsUtil.validPhone(this.formData.mobile)) {
						console.log('validIsAutoSubmit 手机号格式不正确')
						return;
					}

					if (!this.formData.cardId.match(
							/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)) {
						console.log('validIsAutoSubmit 身份证格式不正确')
						return;
					}
					this.submitBlankOrder()
				}
			},
			initShowTimeMethod() {
				let lastTime = new Date();
				lastTime.setHours(23);
				lastTime.setMinutes(59);
				lastTime.setSeconds(59);
				this.timeData.lastTime = lastTime.getTime();
				setInterval(() => {
					this.showTimeMethod();
				}, 1000);
			},
			showTimeMethod() {
				var time_now = new Date(); // 获取当前时间
				time_now = time_now.getTime();
				var time_distance = this.timeData.lastTime - time_now; // 结束时间减去当前时间
				var int_day, int_hour, int_minute, int_second;
				if (time_distance >= 0) {
					// 天时分秒换算
					int_day = Math.floor(time_distance / 86400000)
					time_distance -= int_day * 86400000;
					int_hour = Math.floor(time_distance / 3600000)
					time_distance -= int_hour * 3600000;
					int_minute = Math.floor(time_distance / 60000)
					time_distance -= int_minute * 60000;
					int_second = Math.floor(time_distance / 1000)

					// 时分秒为单数时、前面加零站位
					if (int_hour < 10)
						int_hour = "0" + int_hour;
					if (int_minute < 10)
						int_minute = "0" + int_minute;
					if (int_second < 10)
						int_second = "0" + int_second;

					// 显示时间
					// time_d.innerHTML = int_day;
					this.timeData.hour = int_hour;
					this.timeData.minute = int_minute;
					this.timeData.second = int_second;
				}
			},
			agreementConfirmOkHandler() {
				this.formData.isAgreement = true
				this.submitMethod()
			},
			agreementConfirmShowAgreementHandler(value) {
				this.showAgreementHandler(value)
			},
			inputSuccess(mobile) {
				this.formData.mobile = mobile;
				this.submitMethod()
			},
			getPhoneNumber(e) {

				if (e.detail.code) {
					phoneApi.getWxMiniMobile(e.detail.code, res => {
						this.formData.isAgreement = true
						this.formData.mobile = res
						// this.submitMethod()
						this.$refs.inputUserInfo.open()
					}, err => {
						logApi.addShengXinPlusYinglianLog('获取手机号失败：' + JSON.stringify(err))
					})

				} else {
					messageUtil.showFail('授期获取手机失败')
					logApi.addShengXinPlusYinglianLog('授期获取手机失败' + JSON.stringify(e))
				}

			},
			showAgreementHandler(type) {

				this.agreementType = parseInt(type)
				this.isShowAgreement = true
			},
			inputPhone() {
				if (this.formData.mobile == 11) {
					this.formData.isAgreement = true;
					// getPhoneYunYingMethod()
					// autoSubmit();
					// this.$emit('inputMobile', formData.value.mobile)
				}
			},
			submitMethod() {
				console.log('submitMethod')
				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					messageUtil.showFail('手机号格式不正确')
					return;
				}
				if (this.isNeedSendCode) {
					if (this.formData.code.length < 1) {
						messageUtil.showFail('请输入验证码')
						return;
					}
				}

				if (!this.formData.isAgreement) {
					this.isShowAgreementConfirm = true;
					// messageUtil.showFail('请同意并勾选协议')
					return;
				}


			},


			agreementChange(e) {
				this.formData.isAgreement = !this.formData.isAgreement;
			}
		}

	}
</script>

<style lang="scss" scoped>
	@keyframes butChange {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	//如果仅仅是<Button />
	button::after {
		border-style: none;
	}

	//如果给Button添加了type=primary属性
	button[type=primary] {
		border-style: none;
	}

	//如果给Button添加了 plain 的属性
	button[plain] {
		border-style: none;
	}

	//如果给Button添加了 type=primary 和 plain
	button[type=primary][plain] {
		border-style: none;
	}

	.form-box {
		padding-top: .1rpx;
		margin-top: -50rpx;
	}

	.mobile-btn {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		animation: butChange 1s infinite;
		box-shadow: none;
		border-style: none;
		margin-top: 20rpx;

		border::after {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			content: none;
			border-style: none;
		}

		.submit-btn {

			width: 90%;
			height: auto;
			display: block;
			margin: 0 auto;
		}

	}

	.title {
		font-size: 2.2rem;
		color: #302c2d;
		font-stretch: normal;
		letter-spacing: .1rem;
		text-align: center;
		font-weight: 600;
		position: relative;


		// >view {
		// 	border-bottom: solid 0.8rem #ffed8b;
		// 	display: inline-block;
		// 	height: 2.1rem;
		// }
	}

	.time {
		text-align: center;
		font-size: 2rem;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: .1rem;
		color: #f9ebcc;
		margin-top: .5rem;
		margin-bottom: 1rem;

		span {
			font-size: 1rem;
		}
	}

	.input-box {
		width: 100%;
		margin: 0 auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 76rpx;
		position: relative;


		text {
			font-size: 32rpx;
			letter-spacing: 1rpx;
			color: #323232;
			text-align: left;
			display: inline-block;
			font-weight: 600;
			width: 26%;
			font-family: SourceHanSansCN-Medium;
		}

		.input {
			flex-grow: 1;
			height: 90rpx;
			box-sizing: border-box;
			font-family: SourceHanSansSC-Normal;
			font-size: 36rpx;
			letter-spacing: 1rpx;
			color: #313131;
			background-color: #ffffff;
			border-radius: 50rpx;
			padding-left: 20rpx;

			.input-placeholder {
				font-size: 36rpx;
				color: #313131 !important;
			}

		}

		.mobile-icon {
			// height: 76rpx;
			width: auto;
			height: 46rpx;
			position: absolute;
			top: 15rpx;
			right: 25rpx;
		}




		.type-list-box {
			flex-grow: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.item {
				padding: 9rpx;
				border-radius: 17rpx 12rpx;
				font-size: 26rpx;
				letter-spacing: 1rpx;
				background-color: #efefef;
				border: solid 1rpx #c2c2c2;
				color: #8e8e8e;
				margin-right: 27rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.current {
				background-color: #f0f8fd;
				border: solid 1rpx #94c0ff;
				color: #69a2eb;
			}
		}

		.send-code {
			width: 316rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			background-color: #fb5f2b;
			border-radius: 38rpx;
			font-family: SourceHanSansSC-Normal;
			font-size: 30rpx;
			letter-spacing: 3rpx;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}

	.clauze {
		width: 100%;
		margin: 24rpx auto 0;
		text-align: left;
		padding: 0 !important;
		font-family: SourceHanSansSC-Light;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		color: #FFFDFD;



		.text {
			letter-spacing: 2rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #9C340D;
		}

		.tip-color {
			color: #9C340D;
			font-size: 22rpx;
			font-weight: bold;
		}
	}

	.tip-text {
		letter-spacing: 2rpx;
		text-align: center;
		margin-top: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #9C340D;
	}


	.submit {
		width: 100%;
		margin: 40rpx auto 0;
		display: block;
		text-align: center;
		padding: 0;

		.submit-btn {
			animation: butChange 1s infinite;
			width: 100%;
			height: auto;
		}
	}

	.pay-type-icon {
		display: block;
		width: auto;
		width: 100%;
		margin-top: 30rpx;
	}

	.my-input-form-box {
		padding: 0 30rpx 50rpx;
		width: 80vw;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 15rpx;

		.my-input-title {
			height: 120rpx;
			line-height: 120rpx;
			color: #070707;
			text-align: center;
			font-size: 36rpx;
		}

		.my-input-box {
			border-bottom: solid 1rpx #8e8e8e;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;

			.title {
				font-size: 30rpx;
				width: 150rpx;
				text-align: left;
				color: #313133;
			}

			.input {
				flex-grow: 1;
				font-size: 30rpx;
				color: #313133;

				::v-deep .uni-select {
					border: none;
				}
			}


		}

		.receive-btn {
			width: 100%;
			height: auto;
			display: block;
			margin-top: 50rpx;
		}
	}
</style>